<template>
	<view class="contentier">
		<!-- 使用scroll-view实现tabs滑动切换 -->
		<view class="top-menu-view">
			<view class="menu-topic-view" v-for="(item,index) in tabs" :key="index"
				@click="swichMenu(item,index)">
				<view :class="currentTab==index ? 'menu-topic-act-'+type : 'menu-topic-'+type">
					<text :class="currentTab==index?'menu-topic-text-active':'menu-topic-text'">{{item.name}}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- <scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent"> -->
			
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	export default {
		props:{
			tabs:Array,
			currentTab:Number,
			type:{
				type: String,
				default: 'line',
				// circle背景 line下划线
			}
		},
		data() {
			return {
				// tabCurrent: 'tabNum1',
			}
		},
		methods: {
			swichMenu(item,index) {
				this.$emit('clickItem',index)
			},
		}
	}
</script>

<style lang="less" scoped>
	.top-menu-view {
		display: flex;
		// position: fixed;
		// top: 100rpx;
		// left: 0;
		white-space: nowrap;
		width: 100%;
		background-color: #FFFFFF;
		height: 88rpx;
		line-height: 88rpx;
		justify-content: space-around;

		.menu-topic-view {
			display: flex;
			align-items: center;
			white-space: nowrap;
			height: 88rpx;
			// width: 187.5rpx;
			position: relative;
			text-align: center;
			
			.menu-topic-text-active{
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
			.menu-topic-text {
				font-size: 30rpx;
				color: #7A7A7A;
				// padding: 10rpx 40rpx;
			}

			// .menu-topic-act {
			//  margin-left: 30upx;
			//  margin-right: 10upx;
			//  position: relative;
			//  height: 100%;
			//  display: flex;
			//  align-items: center;
			//  justify-content: center;
			// }
			.menu-topic-bottom {
				position: absolute;
				bottom: 0;
				width: 100%;

				.menu-topic-bottom-color {
					width: 28rpx;
					height: 4rpx;
				}
			}
			.menu-topic-act-line .menu-topic-bottom {
				display: flex;
				justify-content: center;
			}
			.menu-topic-act-line .menu-topic-bottom-color {
				background: #FF6E00;
			}
			.menu-topic-circle{
				padding:0 28rpx;
			}
			.menu-topic-act-circle{
				display: flex;
				justify-content: center;
				background: #FF6E00;
				border-radius: 60rpx 60rpx;
				padding:0 28rpx;
				height: 60rpx;
				line-height: 60rpx;
				.menu-topic-text-active{
					color: #fff;
				}
			}

			
		}
	}
</style>